<template>
    <div>
        <template v-if="data.type == 'action'">
            <table-action :data="data.option" v-model="scope.row"/>
        </template>
        <template v-else-if="data.type == 'switch'">
            <i-switch :data="data.option" :params="data.params" :field="data.field" v-model="scope.row[data.field]"  />
        </template>
        <template v-else-if="data.type == 'image'">
            <div class="__table_img" :style="`background-image: url(${scope.row[data.field]})`">
            </div>
        </template>
        <template v-else>
            <div v-if="data.amend">
                 <!-- 直接编辑  -->
                <row-edit v-if="model == 'input' " :params="data.params" :field="data.field" v-model="scope.row[data.field]" :data="scope.row" :index="scope.$index" />
                 <!-- 浮动编辑  -->
                <table-popover v-else :params="data.params" :field="data.field" v-model="scope.row[data.field]" :data="scope.row" />
            </div>
            <div v-else>
                {{scope.row[data.field]}}
            </div>
        </template>
    </div>
</template>
<script type="text/javascript">
import TablePopover from './TablePopover';
import TableAction from './TableAction';
import Switch from './Drives/Switch';
import RowEdit from './Drives/RowEdit';
export default {
    name: "tableitem",
    props: {
        value: [Array, Object],
        data: [Array, Object],
        scope: [Array, Object],
    },
    inject:['model'],
    components: {
        'row-edit':RowEdit,
        'i-switch':Switch,
        'table-action': TableAction,
        'table-popover': TablePopover,
    },
    data() {
        return {

        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    mounted() {


    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {
        handleAction(index, data, action) {
            console.log("操作数据", [index, data, action])
        },
    }
}
</script>
<style type="text/css" lang="scss">
.__table_img {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 100% auto;
    width: 100px;
    height: 100px
}
</style>